<script setup lang="ts">
  import { ref } from 'vue';
  import TableLayout from '@/layout/table-layout.vue';
  import { Message } from '@arco-design/web-vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { queryInstallList } from '@/api/device-management/install';
  import { queryInstStationOptions } from '@/api/structure-management/station';
  import * as Lodash from 'lodash';
  import { XlsxUtil, getDatetimeFilename } from '@/utils/util';
  import InstallDetails from './details.vue';

  const baseNameMap = {
    itemName: {
      key: 'deviceName',
      label: '设备名称',
      placeholder: '请输入设备名称',
    },
    itemModelCode: {
      key: 'modelCode',
      label: '设备型号',
      placeholder: '请输入设备型号',
    },
    itemDeviceCode: {
      key: 'deviceCode',
      label: '设备编码',
      placeholder: '请输入设备编码',
    },
    iteminstallStatus: { key: 'installStatus', label: '库存状态' },
    itemCustomerName: {
      key: 'customerName',
      label: '客户姓名',
      placeholder: '请输入客户姓名',
    },
    itemCustomerGender: { key: 'customerGender', label: '客户性别' },
    itemLinkSite: {
      key: 'linkSite',
      label: '关联站点',
      placeholder: '请输入关联站点',
    },
    itemLinkSiteName: { key: 'stationName', label: '关联站点' },
    itemInstallTime: { key: 'installTime', label: '绑定时间' },
    itemInstallTimeRange: { key: 'installTimeRange', label: '绑定时间' },
    //
    itemId: { key: 'deviceId', label: '设备ID' },
    btnAction: { label: '操作' },
    btnLook: { label: '查看' },
  };

  const dataPage = ref({
    total: 0,
    page: 1,
    pageSize: 10,
  });

  const linkSiteSelect = useSelectOption({
    name: baseNameMap.itemLinkSite.label,
    apiFun: queryInstStationOptions,
    fieldNames: {
      label: 'name',
      value: 'id',
    },
  });

  // 查询表格列配置
  const tableColumns = [
    {
      title: baseNameMap.itemId.label,
      dataIndex: baseNameMap.itemId.key,
      // width: 140,
    },
    {
      title: baseNameMap.itemName.label,
      dataIndex: baseNameMap.itemName.key,
      // width: 240,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemModelCode.label,
      dataIndex: baseNameMap.itemModelCode.key,
      // width: 240,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemDeviceCode.label,
      dataIndex: baseNameMap.itemDeviceCode.key,
      // width: 240,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemCustomerName.label,
      dataIndex: baseNameMap.itemCustomerName.key,
      // width: 140,
    },
    {
      title: baseNameMap.itemCustomerGender.label,
      dataIndex: baseNameMap.itemCustomerGender.key,
      // width: 140,
    },
    {
      title: baseNameMap.itemLinkSiteName.label,
      dataIndex: baseNameMap.itemLinkSiteName.key,
      // width: 260,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemInstallTime.label,
      dataIndex: baseNameMap.itemInstallTime.key,
      // width: 200,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.btnAction.label,
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      width: 100,
    },
  ];

  const pageTable = usePageTable({
    create: false,
    searchForm: {
      state: {
        [baseNameMap.itemName.key]: '',
        [baseNameMap.itemModelCode.key]: '',
        [baseNameMap.itemDeviceCode.key]: '',
        [baseNameMap.iteminstallStatus.key]: '',
        [baseNameMap.itemInstallTimeRange.key]: [],
      },
    },
    table: {
      rowKey: baseNameMap.itemId.key,
      fakePage: true,
      apiFun: async (query) => {
        return new Promise((resolve) => {
          const timeRange = Lodash.cloneDeep(
            query[baseNameMap.itemInstallTimeRange.key]
          ) as string[];
          let installStart = '';
          let installEnd = '';
          if (timeRange.length >= 2) {
            [installStart, installEnd] = timeRange;
          }
          const params = {
            ...dataPage.value,
            deviceName: query[baseNameMap.itemName.key],
            modelCode: query[baseNameMap.itemModelCode.key],
            deviceCode: query[baseNameMap.itemDeviceCode.key],
            inventoryStatus: query[baseNameMap.itemLinkSite.key],
            installStart,
            installEnd,
          };
          queryInstallList(params).then((res) => {
            dataPage.value.total = res.total;
            const items = res.list;
            resolve(items);
          });
        });
      },
      onSuccess(data) {
        //
      },
      columns: tableColumns,
      rowSelection: {
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      },
    },
  });

  const detailsHandler = ref({
    props: {
      deviceId: '',
    },
    show: (deviceId: string) => {
      detailsHandler.value.props.deviceId = deviceId;
    },
    onCancel: () => {
      detailsHandler.value.props.deviceId = '';
    },
  });

  /**
   * 表格数据导出
   * @param dataList
   */
  const handleExport = (dataList: any[]) => {
    const filename = getDatetimeFilename('【导出-设备绑定】', '.xlsx');
    if (XlsxUtil.writeDownload(filename, dataList)) {
      Message.success('导出成功');
    } else {
      Message.error('导出失败');
    }
  };
</script>

<template>
  <div class="m-install">
    <TableLayout v-bind="pageTable.bindProps" @batch-export="handleExport">
      <template #searchForm="{ state }">
        <!-- 设备名称 -->
        <a-form-item
          :field="baseNameMap.itemName.key"
          :label="baseNameMap.itemName.label"
        >
          <a-input
            v-model="state[baseNameMap.itemName.key]"
            :placeholder="baseNameMap.itemName.placeholder"
            allow-clear
          />
        </a-form-item>
        <!-- 设备型号 -->
        <a-form-item
          :field="baseNameMap.itemModelCode.key"
          :label="baseNameMap.itemModelCode.label"
        >
          <a-input
            v-model="state[baseNameMap.itemModelCode.key]"
            :placeholder="baseNameMap.itemModelCode.placeholder"
            allow-clear
          />
        </a-form-item>
        <!-- 设备编码 -->
        <a-form-item
          :field="baseNameMap.itemDeviceCode.key"
          :label="baseNameMap.itemDeviceCode.label"
        >
          <a-input
            v-model="state[baseNameMap.itemDeviceCode.key]"
            :placeholder="baseNameMap.itemDeviceCode.placeholder"
            allow-clear
          />
        </a-form-item>
        <!-- 客户姓名 -->
        <a-form-item
          :field="baseNameMap.itemCustomerName.key"
          :label="baseNameMap.itemCustomerName.label"
        >
          <a-input
            v-model="state[baseNameMap.itemCustomerName.key]"
            :placeholder="baseNameMap.itemCustomerName.placeholder"
            allow-clear
          />
        </a-form-item>
        <!-- 关联站点 -->
        <a-form-item
          :field="baseNameMap.itemLinkSite.key"
          :label="baseNameMap.itemLinkSite.label"
        >
          <a-select
            v-model="state[baseNameMap.itemLinkSite.key]"
            v-bind="linkSiteSelect.bindProps"
            :placeholder="baseNameMap.itemLinkSite.placeholder"
          />
        </a-form-item>
        <!-- 绑定时间 -->
        <a-form-item
          :field="baseNameMap.itemInstallTimeRange.key"
          :label="baseNameMap.itemInstallTimeRange.label"
        >
          <a-range-picker
            v-model="state[baseNameMap.itemInstallTimeRange.key]"
            style="width: 100%"
          />
        </a-form-item>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button
            size="small"
            type="text"
            @click="detailsHandler.show(record.deviceId)"
            >{{ baseNameMap.btnLook.label }}</a-button
          >
        </a-space>
      </template>
    </TableLayout>
    <!-- 绑定详情 -->
    <InstallDetails
      v-bind="detailsHandler.props"
      @cancel="detailsHandler.onCancel"
    />
  </div>
</template>

<style lang="less" scoped></style>
